{% extends 'base.html' %}
{% load static %}
{% block title %}
    天天生鲜-商品详情
{% endblock %}

{% block content %}
    {% include 'includes/search.html' %}

    <div class="navbar_con">
        <div class="navbar clearfix">
            <div class="subnav_con fl">
                <h1>全部商品分类</h1>
                <span></span>
                <ul class="subnav">
                    <li><a href="#" class="fruit">新鲜水果</a></li>
                    <li><a href="#" class="seafood">海鲜水产</a></li>
                    <li><a href="#" class="meet">猪牛羊肉</a></li>
                    <li><a href="#" class="egg">禽类蛋品</a></li>
                    <li><a href="#" class="vegetables">新鲜蔬菜</a></li>
                    <li><a href="#" class="ice">速冻食品</a></li>
                </ul>
            </div>
            <ul class="navlist fl">
                <li><a href="">首页</a></li>
                <li class="interval">|</li>
                <li><a href="">手机生鲜</a></li>
                <li class="interval">|</li>
                <li><a href="">抽奖</a></li>
            </ul>
        </div>
    </div>

    <div class="breadcrumb">
        <a href="#">全部分类</a>
        <span>></span>
        <a href="#">新鲜水果</a>
        <span>></span>
        <a href="#">商品详情</a>
    </div>

    <div class="goods_detail_con clearfix">
        <div class="goods_detail_pic fl"><img src="/media/{{ object.image }}"></div>

        <div class="goods_detail_list fr">
            <h3>{{ object.name }}</h3>
            <p>{{ object.desc }}</p>
            <div class="prize_bar">
                <span class="show_pirze">¥<em>{{ object.price }}</em></span>
                <span class="show_unit">单  位：{{ object.unite }}</span>
            </div>
            <div class="goods_num clearfix">
                <div class="num_name fl">数 量：</div>
                <div class="num_add fl">
                    <input type="text" class="num_show fl" value="1">
                    <a id="btn_add" class="add fr">+</a>
                    <a id="btn_minus" class="minus fr">-</a>
                </div>
            </div>
            <div class="total">总价：<em>16.80元</em></div>
            <div class="operate_btn">
                <a href="javascript:;" class="buy_btn">立即购买</a>
                <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>
            </div>
        </div>
    </div>

    <div class="main_wrap clearfix">
        <div class="l_wrap fl clearfix">
            <div class="new_goods">
                <h3>新品推荐</h3>
                <ul>
                    <li>
                        <a href="#"><img src="images/goods/goods001.jpg"></a>
                        <h4><a href="#">进口柠檬</a></h4>
                        <div class="prize">￥3.90</div>
                    </li>
                    <li>
                        <a href="#"><img src="images/goods/goods002.jpg"></a>
                        <h4><a href="#">玫瑰香葡萄</a></h4>
                        <div class="prize">￥16.80</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="r_wrap fr clearfix" id="check_div">
            <ul class="detail_tab clearfix" id="check_li">
                <li class="active">商品介绍</li>
                <li>评论</li>
            </ul>

            <div class="tab_content">
                <dl>
                    <dt>商品详情：</dt>
                    <dd>
                        {{ object.content | safe }}
                    </dd>
                </dl>
            </div>

            <div id="comment" class="check_display r_wrap fr clearfix">
                <div id="send_message">
                    <input type="hidden" value="{{ object.pk }}">
                    <input type="text" name="message">
                    <button>发送</button>
                </div>

                <div>
                    <ul id="com_ul">
                        {% for comment in object.com_good.all %}
                            <li>{{ comment.user_id.username }}：{{ comment.comment }}</li>
                        {% endfor %}
                    </ul>

                </div>
            </div>

        </div>
    </div>
{% endblock %}

{% block css %}
    <style>
        .check_display {
            display: none;
        }
    </style>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            var num_show = $(".num_show");
            $("#btn_add").click(function () {
                num_show.val(parseInt(num_show.val()) + 1);
                calc();
            });
            $("#btn_minus").click(function () {
                if (num_show.val() > 1) {
                    num_show.val(parseInt(num_show.val()) - 1);
                    calc();
                }
            });
            calc();

            function calc() {
                $(".total").children("em").text(parseInt(num_show.val()) * parseInt($(".show_pirze").children("em").text()) + "元");
            }

            $("#check_li").children("li").click(function () {
                var num = $(this).index();
                $("#check_li").children("li").removeClass("active");
                $(this).addClass("active");
                $("#check_div").children("div").addClass('check_display');
                $("#check_div").children("div").eq(num).removeClass('check_display');
            });

            $("#send_message").click(function () {
                var good = $(this).children('input').eq(0).val();
                var message = $(this).children('input').eq(1).val();
                $.get('/good/ajax_good/', {'good_id': good, 'message': message}, function (msg) {
                    if (msg != 'false'){
                        $("#com_ul").append("<li>{{ request.user }}："+msg.comment+"</li>");
                        $(this).children('input').eq(1).val("");
                    }
                });
            });

            $("#add_cart").click(function () {
                var count = $(".num_show").val();
                var good = $("#send_message").children('input').eq(0).val();
                $.get("/cart/add_cart/",{'count':count, 'good': good});
            });

        });
    </script>
{% endblock %}